{% extends 'layouts/default/page.html' %}
{% load static %}
{% load i18n %}



{% block content %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi Video Player</title>
    <style>
        .video-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* 3 columns */
            grid-gap: 10px;
            margin: 20px;
        }

        video {
            width: 600px;
            /* 固定宽度 */
            height: 400px;
            /* 固定高度 */
            object-fit: contain;
            /* 保持视频内容适应框 */
            background-color: black;
        }
    </style>
</head>

<body>

    <div class="video-grid">
        <!-- Video Player 1 -->
        <div>
            <input type="file" accept="video/*" onchange="loadVideo(event, 'video1')">
            <video id="video1" controls src="{% static 'a.mp4' %}" type="video/mp4"></video>
            
        </div>
        <!-- Video Player 2 -->
        <div>
            <input type="file" accept="video/*" onchange="loadVideo(event, 'video2')">
            <video id="video2" controls></video>
        </div>
        <!-- Video Player 3 -->
        <div>
            <input type="file" accept="video/*" onchange="loadVideo(event, 'video3')">
            <video id="video3" controls></video>
        </div>
        <!-- Video Player 4 -->
        <div>
            <input type="file" accept="video/*" onchange="loadVideo(event, 'video4')">
            <video id="video4" controls></video>
        </div>
        <!-- Video Player 5 -->
        <div>
            <input type="file" accept="video/*" onchange="loadVideo(event, 'video5')">
            <video id="video5" controls></video>
        </div>
        <!-- Video Player 6 -->
        <div>
            <input type="file" accept="video/*" onchange="loadVideo(event, 'video6')">
            <video id="video6" controls></video>
        </div>
    </div>

    <script>
        function loadVideo(event, videoId) {
            const video = document.getElementById(videoId);
            const file = event.target.files[0];
            const url = URL.createObjectURL(file);
            video.src = url;
        }
    </script>

</body>

</html>


{% endblock %}